import React, { useState,useEffect } from "react";
import { Tabbar } from "@nutui/nutui-react";
import { useNavigate } from "react-router-dom";

import home from "../../images/tabbarIcon/home.png";
import pleDge from "../../images/tabbarIcon/pleDge.png";
import jackPot from "../../images/tabbarIcon/jackpot.png";
import my from "../../images/tabbarIcon/my.png";
import homeCheck from "../../images/tabbarIcon/homeCheck.png";
import pleDgeCheck from "../../images/tabbarIcon/pleDgeCheck.png";
import jackPotCheck from "../../images/tabbarIcon/jackpotCheck.png";
import myCheck from "../../images/tabbarIcon/myCheck.png";
 
import Icons from "../icons";
import "./index.scss";
const TabbarBox = ({ activeName }) => {
  const navigate = useNavigate();
  const [index, setIndex] = useState(activeName);
  const isActiveChange = (iconPath) => {
    return <Icons iconPath={iconPath} />;
  };
 
  const onTabbarClick = (value) => {
    switch (value) {
      case 0:
        setIndex(0);
        navigate("/");
        break;
      case 1:
        setIndex(1);
        navigate("/pledge");
        break;
      case 2:
        setIndex(2);
        navigate("/jackpot");
        break;
      case 3:
        setIndex(3);
        navigate("/my");
        break;
      default:
        setIndex(0);
        navigate("/home");
    }
  };

  return (
    <Tabbar
      className="custom-tabbar"
      inactiveColor="#717784"
      activeColor="#FDCB5B"
      fixed
      safeArea
      value={index}
      onSwitch={(value) => onTabbarClick(value)}
    >
      <Tabbar.Item
        title="首页"
        icon={(active) => isActiveChange(active ? homeCheck : home)}
      />
      <Tabbar.Item
        title="质押"
        icon={(active) => isActiveChange(active ? pleDgeCheck : pleDge)}
      />
      <Tabbar.Item
        title="奖池"
        icon={(active) => isActiveChange(active ? jackPotCheck : jackPot)}
      />
      <Tabbar.Item
        title="我的"
        icon={(active) => isActiveChange(active ? myCheck : my)}
      />
    </Tabbar>
  );
};

export default TabbarBox;
